/**
 * 预算执行情况 for 报销单 申请单
 */
import React from 'react';
import { connect } from 'react-redux'
import { messages, formatNumber  } from "share/common";
import { Table, Popover, Collapse, Icon } from "antd"
const Panel = Collapse.Panel;

import BudgetExplainService from 'components/template/budget-explain/budget-explain.service'
import 'styles/components/template/budget-explain/budget-explain.scss'

class BudgetExplain extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      columns: [
        {dataIndex: 'controlLevel', title: messages('common.column.status')/*状态*/, render: value => {
          const statusObj = {
            REMIND: messages('components.key957')/*警告*/,
            ALLOWED: messages('components.key957')/*警告*/,
            BLOCK: messages('components.key958')/*禁止*/,
            NO_MESSAGE: messages('common.pass')/*通过*/,
          };
          return statusObj[value] || messages('common.pass')/*通过*/
        }},
        {dataIndex: 'bgtBudgetFunctionAmount', title: messages('components.key918')/*预算额*/,
          render: value => value ? <Popover content={formatNumber(value)}>{formatNumber(value)}</Popover> : '-'},
        {dataIndex: 'bgtReverseFunctionAmountR', title: messages('components.key919')/*保留额*/,
          render: value => value ? <Popover content={formatNumber(value)}>{formatNumber(value)}</Popover> : '-'},
        {dataIndex: 'bgtReverseFunctionAmountU', title: messages('components.key920')/*发生额*/,
          render: value => value ? <Popover content={formatNumber(value)}>{formatNumber(value)}</Popover> : '-'},
        {dataIndex: 'bgtAdjustAmount', title: messages('components.key1343')/*调整额*/,
          render: value => value ? <Popover content={formatNumber(value)}>{formatNumber(value)}</Popover> : '-'},
        {dataIndex: 'availableAmount', title: messages('components.key921')/*可用额*/,
          render: value => value ? <Popover content={formatNumber(value)}>{formatNumber(value)}</Popover> : '-'},
        {dataIndex: 'progressRate', title: messages('components.key922')/*预算进度*/,
          render: value => value ? <Popover content={value}>{value}</Popover> : '-'},
        {dataIndex: 'scenarioName', title: messages('components.key923')/*控制场景*/,
          render: value => value ? <Popover content={value}>{value}</Popover> : '-'},
        {dataIndex: 'versionName', title: messages('components.key924')/*控制版本*/,
          render: value => value ? <Popover content={value}>{value}</Popover> : '-'},
        {dataIndex: 'structureName', title: messages('components.key637')/*预算表*/,
          render: value => value ? <Popover content={value}>{value}</Popover> : '-'},
        {dataIndex: 'itemName', title: messages('components.key81')/*预算项目*/,
          render: value => value ? <Popover content={value}>{value}</Popover> : '-'},
      ],
      data: [],
    }
  }

  componentDidMount () {
    this.getList()
  }

  getList = () => {
    const { documentType, documentId } = this.props;
    const { columns } = this.state;
    let params = {
      documentType, documentId
    };
    if (documentType === 'EXP_REQUISITION') {
      params = {
        applicationOID: documentId
      };
    }
    this.setState({ loading: true });
    BudgetExplainService[documentType === 'EXP_REPORT' ? 'getBudgetExplain' : 'getApplicationBudgetExplain'](params).then(res => {
      let data = res.data;
      data.map(ruleItem => {
        let dynamicColumns = [];
        ruleItem.budgetCheckLogs.map(item => {
          item.dynamics && item.dynamics.map(column => {
            dynamicColumns.push({
              dataIndex: column.key,
              title: column.name,
              render: value => value ? <Popover content={value}>{value}</Popover> : '-'
            });
            item[column.key] = column.value
          })
        });
        ruleItem.columns = columns.concat(dynamicColumns)
      });
      this.setState({
        loading: false,
        data
      });
    })
  };

  render() {
    const { loading, data } = this.state;
    return (
      <div className="budget-explain" style={{margin: '30px 0'}}>
        <Collapse bordered={false}>
          {data.map((item, index) => (
            <Panel header={`${item.controlRuleName}（ ${item.controlStrategyName}）`} key={index} className="table-container">
              <Table rowKey={(record, index) => index}
                     loading={loading}
                     columns={item.columns}
                     dataSource={item.budgetCheckLogs}
                     pagination={false}
                     size="middle"
                     bordered
                     scroll={{ x: true }}
              />
            </Panel>
          ))}
        </Collapse>
      </div>
    )
  }
}

BudgetExplain.propsType = {
  documentType: React.PropTypes.string.isRequired, //报销单EXP_REPORT、申请单EXP_REQUISITION
  documentId: React.PropTypes.string.isRequired, //单据id 申请单的时候为单据oid
};

BudgetExplain.defaultProps = {

};

function mapStateToProps(state) {
  return { }
}

export default connect(mapStateToProps)(BudgetExplain)
